<template>
  <div v-if="showHandleDialog" class="dialog">
    <el-dialog
      :title="titleText"
      :visible="showHandleDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form ref="ruleForm" :model="handleData" :rules="rules">
        <el-form-item label="处理方式：" class="w100p" prop="method">
          <el-select
            clearable
            v-model="handleData.method"
            placeholder="请选择处理方式"
          >
            <el-option
              v-for="(item, index) in handWays"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="w100p" label="处理金额：" prop="amount">
          <el-input clearable placeholder="请输入处理金额"
            @input="($event) => {
            if($event.startsWith('0') && !$event.includes('.') && $event != 0){
              $set(handleData, 'amount', $event.replace(/\b(0+)/gi,''))
            }else{
              $set(handleData, 'amount', Math.abs($event))
            }}" type="number" v-model="handleData.amount"></el-input>
        </el-form-item>
        <el-form-item class="w100p" label="报废日期：" prop="scrapDate">
          <el-date-picker
            clearable
            v-model="handleData.scrapDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="w100p" label="处理人：" prop="handUsername">
          <el-select
            v-model="handleData.handUsername"
            clearable
            filterable
            placeholder="报废处理人选择"
          >
            <el-option
              v-for="item of userList"
              :key="item.userId"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" class="w100p" prop="remark">
          <el-input
            v-model="handleData.remark"
            clearable
            :rows="2"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ScrapHandleApi from "@/api/equip-repair-manage/destory-manage/index";
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: "",
    },
    showHandleDialog: {
      type: Boolean,
      default: false,
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
    userList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      handleData: {},
      handWays: ["出售", "置换", "销毁"],
      rules: {
        method: [
          {
            required: true,
            message: "请选择报废处理方式",
            trigger: ["change", "blur"],
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入维修费用",
            trigger: ["change", "blur"],
          },
          {
            pattern: /^-?\d{1,16}(?:\.\d{1,8})?$/,
            message: "请输入维修费用(数字)",
            trigger: ["change", "blur"],
          },
        ],
        scrapDate: [
          {
            required: true,
            message: "请选择维修日期",
            trigger: ["change", "blur"],
          },
        ],
        handUsername: [
          {
            required: true,
            message: "请选择维修人",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  created() {},
  mounted() {

    this.$nextTick(() => {
        this.$refs['ruleForm']?.clearValidate();
      });
  },
  methods: {
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 这里发起处理亲求
          this.handleData.scrapTaskId = this.editObject.scrapTaskId;
          this.handleData.complete = true;
          ScrapHandleApi.scrapHandle(this.handleData).then((res) => {
            if (res.code === 1) {
              this.$message.success("报废处理成功");
              this.handleData = {};
              this.$emit("save"); //更新
            } else {
              this.$message.error("报废处理失败");
            }
          });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.handleData = {};
      this.$emit("leaveDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.meaasge {
  width: 100%;
  text-align: center;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
// ::v-deep .el-dialog__body {
//   padding-right: 50px;
// }
</style>
